<template>
  <el-row class="tac full-height">
    <el-col :span="24" class="full-height-col">
      <!-- Logo和标题区域 -->
      <div class="header-container">
        <img 
          src="@/assets/images/慢病报销管理logo.png" 
          alt="系统Logo"
          class="logo-image"
        />
        <h5 class="title-text">功能管理</h5>
      </div>
      
      <!-- 菜单区域 -->
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        router
        @open="handleOpen"
        @close="handleClose"
        @select="handleMenuSelect"
      >
        <!-- 基础数据模块 -->
        <!-- 首页 -->
        <el-menu-item index="/home/home-management">
          <el-icon><HomeFilled /></el-icon>
          <span>首页</span>
        </el-menu-item>

        <!-- 角色权限管理 -->
        <el-menu-item v-if="role === '超级管理员' " index="/home/role-perm-management">
          <el-icon><Key /></el-icon>
          <span>角色权限管理</span>
        </el-menu-item>

        <!-- 用户账号管理 -->
        <el-menu-item v-if="role === '超级管理员' " index="/home/user-management">
          <el-icon><User /></el-icon>
          <span>用户账号管理</span>
        </el-menu-item>

          <!-- 角色管理 -->
        <el-menu-item v-if="role === '超级管理员' " index="/home/role-management">
          <el-icon><List /></el-icon>
          <span>角色管理</span>
        </el-menu-item>

        <!-- 权限管理 -->
        <el-menu-item v-if="role === '超级管理员' " index="/home/perm-management">
          <el-icon><Lock /></el-icon>
          <span>权限管理</span>
        </el-menu-item>

        

        <!-- 农合经办机构管理 -->
        <el-menu-item v-if="role === '超级管理员' " index="/home/cooperative-institution">
          <el-icon><OfficeBuilding /></el-icon>
          <span>农合经办机构管理</span>
        </el-menu-item>

        <!-- 慢性病分类管理 -->
        <el-menu-item v-if="role === '超级管理员' " index="/home/chronic-disease-category">
          <el-icon><Medal /></el-icon>
          <span>慢性病分类管理</span>
        </el-menu-item>

        <!-- 行政区域管理 -->
        <el-menu-item v-if="role === '超级管理员' " index="/home/administrative-region">
          <el-icon><Location /></el-icon>
          <span>行政区域管理</span>
        </el-menu-item>

        <el-menu-item v-if="role === '超级管理员' " index="/home/annual-fee-standard">
          <el-icon><Location /></el-icon>
          <span>年度缴费标准管理</span>
        </el-menu-item>



        <!-- 业务管理 -->
        <!-- 慢病政策管理 -->
        <el-menu-item v-if=" role === '县合管办领导' || role === '慢病政策管理员'" index="/home/chronic-policy-management">
          <el-icon><Document /></el-icon>
          <span>慢病政策管理</span>
        </el-menu-item>

        <!-- <el-menu-item v-if=" role === '县合管办领导' " index="/home/policy-attachment">
          <el-icon><Location /></el-icon>
          <span>政策附件管理</span>
        </el-menu-item> -->

        <!-- 医疗机构管理 -->
        <el-menu-item v-if=" role === '县合管办经办人' || role === '医疗机构管理员'" index="/home/med-inst-management">
          <el-icon><Hospital /></el-icon>
          <span>医疗机构管理</span>
        </el-menu-item>
        <!-- 家庭档案管理 -->
        <el-menu-item v-if=" role === '乡镇农合经办人' " index="/home/family-management">
          <el-icon><Files /></el-icon>
          <span>家庭档案管理</span>
        </el-menu-item>

        <!-- 农民档案管理 -->
        <el-menu-item v-if=" role === '乡镇农合经办人' " index="/home/farmer-management">
          <el-icon><Notebook /></el-icon>
          <span>参合农民档案管理</span>
        </el-menu-item>
        <!-- 慢病证管理 -->
        <el-menu-item v-if=" role === '乡镇农合经办人'" index="/home/chronic-cert-management">
          <el-icon><Coin /></el-icon>
          <span>慢病证管理</span>
        </el-menu-item>

        <!-- <el-menu-item v-if=" role === '乡镇农合经办人' " index="/home/certificate-change-log">
          <el-icon><Location /></el-icon>
          <span>慢病证变更记录管理</span>
        </el-menu-item> -->
        
        <el-menu-item v-if=" role === '乡镇农合经办人' || role === '县合管办领导' " index="/home/family-payment">
          <el-icon><Location /></el-icon>
          <span>参合缴费管理</span>
        </el-menu-item>
        
         <!-- 慢病报销管理 -->
        <el-menu-item v-if=" role === '县合管办领导' || role === '县合管办经办人' || role === '乡镇农合经办人'" index="/home/chronic-reimb-management">
          <el-icon><Coin /></el-icon>
          <span>慢病报销管理</span>
        </el-menu-item>
        <!-- <el-menu-item v-if=" role === '乡镇农合经办人' || role === '县合管办领导' " index="/home/farmer-payment-detail">
          <el-icon><Location /></el-icon>
          <span>参合人员缴费明细管理</span>
        </el-menu-item> -->
        <el-menu-item v-if=" role === '县合管办领导' || role === '县合管办经办人' || role === '乡镇农合经办人'" index="/home/chronic-reimbursement-statistics">
          <el-icon><Location /></el-icon>
          <span>病种报销统计</span>
        </el-menu-item>
        <el-menu-item v-if=" role === '县合管办领导' || role === '县合管办经办人' || role === '乡镇农合经办人'" index="/home/chronic-reimbursement-area">
          <el-icon><Location /></el-icon>
          <span>区域报销统计</span>
        </el-menu-item>
        
        <!-- 统计功能 -->
        <!-- <el-menu-item v-if="role === '超级管理员' || role === '县合管办领导' " index="/home/farmer-payment-detail">
          <el-icon><Location /></el-icon>
          <span>全县慢病报销统计分析</span>
        </el-menu-item> -->
        <!-- <el-menu-item v-if="role === '超级管理员' || role === '乡镇农合经办人' " index="/home/farmer-payment-detail">
          <el-icon><Location /></el-icon>
          <span>查询统计本乡镇的慢病报销记录</span>
        </el-menu-item> -->
        
    
      </el-menu>
    </el-col>
  </el-row>
</template>

<script setup>
import { useRouter } from 'vue-router'
import {
  HomeFilled,
  User,
  Key,
  List,
  Lock,
  FirstAidKit as Hospital,
  Files,
  Notebook,
  Coin,
  Document,
  OfficeBuilding,
  Medal,
  Location
} from '@element-plus/icons-vue'

const router = useRouter()
const role = localStorage.getItem('role') // 从localStorage获取role

const handleMenuSelect = (key) => {
  router.push(key)
}

const handleOpen = (key, keyPath) => {
  console.log('菜单展开:', key, keyPath)
}

const handleClose = (key, keyPath) => {
  console.log('菜单收起:', key, keyPath)
}
</script>

<style scoped>
/* 基础布局 */
.full-height {
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}

.full-height-col {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
}

/* 顶部Logo和标题样式 */
.header-container {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
}

.logo-image {
  width: 30px;
  height: 30px;
  margin-right: 12px;
  object-fit: contain;
}

.title-text {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

/* 菜单样式 */
.el-menu-vertical-demo {
  flex: 1;
  border-right: none;
  overflow-y: auto;
  padding: 8px 0;
}

.el-menu-item {
  height: 46px;
  line-height: 46px;
  margin: 4px 8px;
  border-radius: 6px;
  padding-left: 20px !important;
  transition: all 0.3s ease;
}

.el-menu-item:hover {
  background-color: rgba(64, 158, 255, 0.1);
  transform: translateX(4px);
}

.el-menu-item.is-active {
  background-color: rgba(64, 158, 255, 0.15);
  color: var(--el-color-primary);
  font-weight: 600;
  border-left: 3px solid var(--el-color-primary);
}

/* 图标样式 */
.el-menu-item .el-icon {
  margin-right: 10px;
  font-size: 18px;
  transition: all 0.3s;
}

.el-menu-item:hover .el-icon {
  transform: scale(1.1);
}

.el-menu-item.is-active .el-icon {
  color: var(--el-color-primary);
}

/* 彩色图标（按菜单项顺序） */
.el-menu-item:nth-child(1) .el-icon { color: #1890ff; } /* 首页 */
.el-menu-item:nth-child(2) .el-icon { color: #722ed1; } /* 角色权限 */
.el-menu-item:nth-child(3) .el-icon { color: #13c2c2; } /* 用户管理 */
.el-menu-item:nth-child(4) .el-icon { color: #52c41a; } /* 角色管理 */
.el-menu-item:nth-child(5) .el-icon { color: #fa8c16; } /* 权限管理 */
.el-menu-item:nth-child(6) .el-icon { color: #f5222d; } /* 医疗机构 */
.el-menu-item:nth-child(7) .el-icon { color: #eb2f96; } /* 家庭档案 */
.el-menu-item:nth-child(8) .el-icon { color: #fa541c; } /* 农民档案 */
.el-menu-item:nth-child(9) .el-icon { color: #a0d911; } /* 慢病报销 */
.el-menu-item:nth-child(10) .el-icon { color: #2f54eb; } /* 慢病政策 */
.el-menu-item:nth-child(11) .el-icon { color: #722ed1; } /* 农合经办机构 */
.el-menu-item:nth-child(12) .el-icon { color: #13c2c2; } /* 慢性病分类 */
.el-menu-item:nth-child(13) .el-icon { color: #13c2c2; } /* 行政区域 */

/* 滚动条样式 */
.el-menu-vertical-demo::-webkit-scrollbar {
  width: 6px;
}

.el-menu-vertical-demo::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
  border-radius: 3px;
}

.el-menu-vertical-demo::-webkit-scrollbar-track {
  background-color: transparent;
}
</style>